<!--轮播用到了swiper插件 "vue-awesome-swiper": "^2.6.4",-->
<template>
  <swiper class="swiper-container banner" id="banner" ref="mySwiper" :options="swiperOption">
    <swiper-slide class="swiper-slide" v-for="str in banner" :key="str.imgId">
      <a :href="str.imgId"><img :src="str.imgurl" alt=""></a>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'banner',
    props: ['banner'],
    data () {
      return {
        swiperOption: {
          notNextTick: true,
          autoplay: 3000,
          effect: 'slide',
          grabCursor: true,
          setWrapperSize: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          mousewheelControl: true,
          observeParents: true,
          loop: true,
          autoplayDisableOnInteraction: false
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }
    }
  }
</script>
<style>
  .banner{
    width: 320px;
    height: 85px;
    overflow: hidden;
    position: relative;
  }
  .banner .swiper-slide{
    width: 100%;
    float:left;
  }
  .banner .swiper-slide a{
    display: block;
    width: 100%;
  }
  .banner .swiper-slide  a img{
    width: 100%;
  }
  .swiper-pagination{
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
  .swiper-pagination span{
    float: left;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #bbb;
    margin-left: 10px;
  }
  .swiper-pagination span.swiper-pagination-bullet-active{
    background: #f60;
  }


</style>
